<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>粘性定位</title>
        <style type="text/css">
            .wrapper {
                border: 1px solid blue;
                margin: 10px auto;
            }
            .odd,
            .even {
                height: 400px;
            }
            .even { 
                background: #dfdfdf; 
            }
            .outer {
                background: #ff0;
            }

            .outer>p {
                margin: 0;
                height: 150px;
            }

            .inner {
                position: sticky;
                top: 10px;
                left: 0;
                height: 80px;
                background: rgba(3, 109, 3, 0.5);
            }
        </style>
    </head>
    <body>

        <h3>粘性定位</h3>
        <p>当元素的定位方式为`sticky`时即为粘性定位</p>

        <div class="wrapper odd">天</div>
        <div class="wrapper even">地</div>
        <div class="wrapper outer">
            <div class="inner"></div>
            <b>我是打酱油的，不是打醋的，也不是上课睡觉的</b>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
        </div>
        <div class="wrapper odd">玄</div>
        <div class="wrapper even">黄</div>

    </body>
</html>